<template>
  <div class="refound">
    <section>
      <div class="memberTop jscenter" @click="selectType">
        <p class="topTitle">申请类型</p>
        <p class="placeholder">{{ refoundRes.title }}</p>
        <nut-image
          @click="selectType"
          class="rightIcon"
          :src="getAssetsFile('home/payOrder/rightArrow.png')"
        ></nut-image>
      </div>
    </section>
    <div class="orderBox">
      <div class="orderTop acenter">
        <p>订单商品</p>
      </div>
      <div class="orderCenter">
        <div class="orderItem" v-for="child in receptData.list" :key="child.id">
          <orderCard :options="child" @show="showFn"> </orderCard>
        </div>
        <div class="orderReason" v-if="receptData.data?.user_remark">
          <p class="reasonTitle">退款原因:</p>
          <p class="reasonInfo">
            {{ receptData.data?.user_remark }}
          </p>
        </div>
      </div>
    </div>
    <div class="orderBottom">
      <p>退款说明</p>
      <nut-input
        v-model="refoundRes.organizer_remark"
        type="textarea"
        rows="2"
        max-length="100"
        placeholder="请输入退款原因等信息…"
      />
    </div>

    <template v-if="isShowBtn">
      <halfFoot @cancel="refuseRefound" @confirm="confirmRefound">
        <template #cancel>
          <slot>拒绝退款</slot>
        </template>
        <template #confirm> <slot name="">确认退款</slot> </template>
      </halfFoot>
    </template>

    <template v-else>
      <fullFoot :title="'确认退款'" @click-btn="confirmRefound"></fullFoot>
    </template>

    <myDialog ref="tipRef" @confirm="confirmBtn" @cancel="cancelBtn">
      <template #title>
        <div class="dialogTop">
          <p class="dialogTitle">
            {{ refoundRes.type == 1 ? "是否退款" : "是否退货退款" }}
          </p>
          <p class="titlePrice"><span>￥</span>{{ refoundRes.price }}</p>
        </div>
      </template>
      <div class="refundItem" v-for="child in receptData.list" :key="child.id">
        <div class="refundTop jscenter">
          <p class="refundTitle texthiden">
            {{ child.goods_name }}
          </p>
          <div class="refundPrice">
            <p>退款</p>
            <p class="price"><span>￥</span>{{ refoundRes.price }}</p>
          </div>
        </div>
        <p class="count">共{{ child.quantity }}件</p>
      </div>
      <template #cancel>取消</template>
      <template #confirm>
        {{ refoundRes.type == 1 ? "确认退款" : "确认退货退款" }}</template
      >
    </myDialog>
    <refoundDialog
      ref="refoundDialogRef"
      @select="selectRefound"
      :isManager="true"
    ></refoundDialog>
    <my-image-preview ref="myImagePreviewRef"></my-image-preview>
  </div>
</template>

<script setup lang="ts">
import orderCard from "@/components/orderCard/index.vue";
import myImagePreview from "@/components/imagePreview/index.vue";
import myDialog from "@/components/Dialog/index.vue";
import halfFoot from "../home/groupLink/components/halfFoot.vue";
import fullFoot from "../home/groupLink/components/fullFoot.vue";
import { ref } from "vue";
import { isRes, getAssetsFile } from "@/utils/pub-use";
import { refundDetailApi, doRefundApi } from "@/api/refound/index";
import { useRoute } from "vue-router";
import refoundDialog from "./component/refoundDialog.vue";
import router from "@/router";
import { Toast } from "@nutui/nutui";
const myImagePreviewRef = ref<InstanceType<typeof myImagePreview>>();
const refoundDialogRef = ref<InstanceType<typeof refoundDialog>>();
const showFn = (url: string) => {
  myImagePreviewRef.value?.showFn(url);
};
const route = useRoute();

let refoundRes: any = ref({
  organizer_remark: "",
  status: "",
  order_id: route.query.order_id,
  title: "",
  type: "",
  price: "",
});
let isShowBtn: any = "";
//-----------------------------------------------获取数据-----------------------------------------------
let receptData: any = ref({});

const getList = async () => {
  let res = await refundDetailApi({ order_id: route.query.order_id });
  if (isRes(res)) {
    receptData.value = res.result;
    refoundRes.value.type = res.result.refund_type;
    refoundRes.value.price = receptData.value.total_price;
    isShowBtn = refoundRes.value.type;

    if (refoundRes.value.type == 1) {
      refoundRes.value.title = "我要退款(无需退货)";
    } else if (refoundRes.value.type == 2) {
      refoundRes.value.title = "我要退货退款";
    }
  }
};
getList();
const tipRef = ref<InstanceType<typeof myDialog>>();
const openDialog = () => {
  tipRef.value?.openDialog();
};
const selectType = () => {
  refoundDialogRef.value?.openDialog();
};

const selectRefound = (payload: any) => {
  refoundRes.value.title = payload.title;
  refoundRes.value.type = payload.id;
  refoundDialogRef.value?.closeDialog();
};

const confirmBtn = async () => {
  let res = await doRefundApi(refoundRes.value);
  if (isRes(res)) {
    Toast.success("操作成功");
    setTimeout(() => {
      router.push("/ordermanage");
    }, 500);
  }
};
const cancelBtn = () => {
  tipRef.value?.closeDialog();
};

//同意退款、拒绝退款
const refuseRefound = async () => {
  refoundRes.value.status = -1;
  let res = await doRefundApi(refoundRes.value);
  if (isRes(res)) {
    Toast.success("操作成功");
    router.push("/ordermanage");
  }
};
const confirmRefound = () => {
  if (refoundRes.value.type) {
    refoundRes.value.status = 1;
    openDialog();
  } else {
    Toast.warn("请选择退款类型");
  }
};
</script>

<style lang="scss" scoped>
.refound {
  background: #f8f9fa;
  section {
    margin-top: 20px;
    background: #ffffff;
    padding: 20px;
  }
  .memberTop {
    .topTitle {
      font-size: 32px;
      font-weight: 500;
      color: #000000;
    }
    .placeholder {
      color: #000000;
      font-size: 28px;
      margin-left: 40px;
      margin-right: auto;
    }
    .rightIcon {
      width: 26px;
      height: 26px;
    }
  }
  .orderBox {
    background: #ffffff;
    margin-top: 20px;
    padding: 20px;
    .orderTop {
      height: 100px;
      border-bottom: 1px solid #eeeeee;
      p {
        font-weight: 500;
        color: #000000;
        font-size: 32px;
      }
    }
    .orderCenter {
      width: 100%;
      .orderItem {
        border-bottom: 1px solid #eeeeee;
      }
      .orderReason {
        display: flex;
        justify-content: space-between;
        padding: 30px 0;
        .reasonTitle {
          color: #333333;
          font-size: 28px;
        }
        .reasonInfo {
          width: 468px;
          font-size: 26px;
          color: #999999;
        }
      }
    }
  }
  .orderBottom {
    background: #ffffff;
    margin-top: 20px;
    padding: 20px;
    p {
      font-weight: 500;
      color: #000000;
      font-size: 32px;
    }
    :deep(.nut-input) {
      padding-left: 0;
      padding-right: 0;
      textarea {
        min-height: 300px;
      }
    }
  }

  .dialogTop {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-top: 30px;
    font-weight: 500;
    color: #000000;
    font-size: 36px;
    .titlePrice {
      margin-left: 5px;
      font-weight: 500;
      color: #f55726;
      span {
        font-size: 30px;
      }
    }
  }
  .refundItem {
    margin-top: 38px;
    padding: 0 30px;
    border-bottom: 1px solid #eee;
    .refundTop {
      .refundTitle {
        text-align: left;
        width: 300px;
        color: #000000;
        font-size: 26px;
      }
      .refundPrice {
        display: flex;
        align-items: center;
        color: #000000;
        font-size: 26px;
        .price {
          color: #f55726;
          span {
            font-size: 20px;
          }
        }
      }
    }
    .count {
      margin-top: 7px;
      text-align: left;
      margin-bottom: 18px;
    }
  }
  .refundItem:last-child {
    border-bottom: none;
  }
}
</style>
